import 'babel-polyfill'
import React, { Suspense, useEffect } from "react";
import ReactDOM from "react-dom";
import "./App.css";
import Router from "./router";
import HandleError from "./errorHandle";
import * as Sentry from '@sentry/react'

Sentry.init({
  dsn: "https://adf0efd43820c5e7b0b3cfb0918530a2@o4506778151616512.ingest.sentry.io/4506778155024384",
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration({
      maskAllText: false,
      blockAllMedia: false,
    }),
  ],
  // Performance Monitoring
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
  // Session Replay
  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
});

const Com = (): JSX.Element => {
  useEffect(() => {
    return () => {
      console.log('加载好了')
    }
  }, [])
  return (
    <div>加载中...</div>
  )
}

function render() {
  ReactDOM.render(
    // 严格模式对弃用的api进行警告
    <React.StrictMode>
      {/* 错误边界捕获 */}
      <HandleError>
        {/* 组件渲染前的等待 */}
        <Suspense fallback={<Com />}>
          <p>viteReact</p>
          <Router />
        </Suspense>
      </HandleError>
    </React.StrictMode>,
    document.getElementById("root")
  );
}

render()

zhuge.track('购买商品');